<p>This rule raises an issue when Angular output bindings (including aliases) are named using standard DOM event names like 'click', 'change', or
'blur'.</p>
<h2>Why is this an issue?</h2>
<p>Using native DOM event names for Angular output bindings creates confusion and potential conflicts in event handling.</p>
<p>When you name a custom output with the same name as a native DOM event, it becomes unclear whether you’re handling a native browser event or a
custom component event. This ambiguity makes the code harder to understand and debug.</p>
<p>Additionally, this naming pattern can lead to unexpected behavior when the component is used, as developers might assume they’re binding to native
events when they’re actually binding to custom outputs.</p>
<h3>What is the potential impact?</h3>
<p>This practice reduces code clarity and can lead to debugging difficulties when developers cannot distinguish between native DOM events and custom
component events. It may also cause confusion during code reviews and maintenance.</p>
<h3>How to fix in Angular?</h3>
<p>Rename the output binding to use a more descriptive, non-native event name. Add a prefix or suffix to make it clear this is a custom component
event.</p>
<h4>Non-compliant code example</h4>
<pre data-diff-id="1" data-diff-type="noncompliant">
@Component()
class MyComponent {
  @Output() change = new EventEmitter&lt;string&gt;(); // Noncompliant
}
</pre>
<h4>Compliant code example</h4>
<pre data-diff-id="1" data-diff-type="compliant">
@Component()
class MyComponent {
  @Output() valueChange = new EventEmitter&lt;string&gt;();
}
</pre>
<p>When using the new output() function, ensure both the property name and alias avoid native DOM event names.</p>
<h4>Non-compliant code example</h4>
<pre data-diff-id="2" data-diff-type="noncompliant">
@Component()
class MyComponent {
  change = output&lt;string&gt;(); // Noncompliant
}
</pre>
<h4>Compliant code example</h4>
<pre data-diff-id="2" data-diff-type="compliant">
@Component()
class MyComponent {
  valueChange = output&lt;string&gt;();
}
</pre>
<p>In component metadata, rename outputs to avoid native DOM event names.</p>
<h4>Non-compliant code example</h4>
<pre data-diff-id="3" data-diff-type="noncompliant">
@Component({
  outputs: ['click'] // Noncompliant
})
class MyComponent {}
</pre>
<h4>Compliant code example</h4>
<pre data-diff-id="3" data-diff-type="compliant">
@Component({
  outputs: ['buttonClick']
})
class MyComponent {}
</pre>
<h3>Documentation</h3>
<ul>
  <li> <a href="https://github.com/angular-eslint/angular-eslint">Angular ESLint</a> - Rule <a
  href="https://github.com/angular-eslint/angular-eslint/blob/main/packages/eslint-plugin/docs/rules/no-output-native.md">no-output-native</a> </li>
  <li> Angular Output Events Guide - <a href="https://angular.dev/guide/components/outputs">Official Angular documentation on component outputs and
  event binding</a> </li>
  <li> Angular Event Binding - <a href="https://angular.dev/guide/templates/event-listeners">Guide on handling events in Angular templates</a> </li>
</ul>
